<template>
  <el-dialog
    title="编辑组件"
    :visible.sync="dialogVisible"
    width="40%"
    :close-on-click-modal="false"
    class="newcomponent"
    :before-close="handleClose">
    <el-form label-width="120px" label-position="right" style="width:85%;">
      <el-form-item label="标题：">
        <el-input type="text" size="small" v-model="component.title"  placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="名称：">
        <el-input type="text" size="small" v-model="component.name"  placeholder="请输入名称" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="是否为模态框：">
          <el-radio-group v-model="component.is_dialog">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="是否为指令：">
          <el-radio-group v-model="component.is_directive">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="宽度：">
        <el-input-number type="text" :min="0" size="small" v-model="component.width"></el-input-number> px
      </el-form-item>
      <el-form-item label="高度：">
        <el-input-number type="text" :min="0" size="small" v-model="component.height"></el-input-number> px
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="intCreate">编 辑</el-button>
      </span>
  </el-dialog>
</template>
<script type="text/javascript">
import { mapState, mapMutations, mapActions } from 'vuecx'
// import empty from './empty.vue'
export default {
  props:{
    value:[Object,Array,String,Number,Boolean]
  },
  components: {
    //empty
  },
  data: function () {
    return {
      component: {
        title: "",
        type: "component",
        name: "",
        width: 800,
        height: 500,
        is_dialog:false,
        is_directive:false,
      },
      dialogVisible: false
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
      ...mapState(['resources'])
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.component = this.value.config.data;
    this.component.width = parseInt(this.component.width);
    this.component.height = parseInt(this.component.height);
    // console.log('this',this);
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapActions(['setResourcesAttr']),
    handleClose(){
      this.dialogVisible = false
    },
    /**
     * 创建页面
     * @return {[type]} [description]
     */
    intCreate(){
      //判断规则
      if(!this.checked()){
        return false;
      }
      //
      this.component.width = this.component.width + 'px';
      this.component.height = this.component.height + 'px';
      //
      // 提交
      this.value.config.data = this.component;
      //
      this.$cloud.post('build/component_save',{data:this.value}).then(response =>{
        this.dialogVisible = false;
        this.$message.success('更新成功！');
        this.resources.components.forEach(item => {
          if(item.value === this.component.name){
            item.label = this.component.title+"("+item.value+")";
          }
        })
      })
    },

    /**
     * 检查输入是否合法
     * @return {[type]} [description]
     */
    checked(){
      let ret = false;
      let tips = '';
      let rules = /^[a-zA-Z0-9]+$/;
      if(!this.component.title){
        tips = '请输入标题！';
        ret = true;
      }else if(!(this.component.width > 0 && this.component.height > 0 )){
        tips = "请输入有效的宽高值！";
        ret = true;
      }

      if(ret){
        this.$message.warning(tips);
      }
      return !ret;
    }
  }
}

</script>
<style type="text/css" lang="scss">
.newcomponent{
  .el-form-item{
    margin-bottom: 5px;
  }
}
</style>
